@import url('./style');
#header{
  position: relative;
  z-index: 20;
  >div.header{
    background-color: white;
    position: relative;
    z-index: 20;
    >div{
      width: 1280 * @px1;
      margin: auto;
      padding-top: 10 * @px1;
      padding-bottom: 10 * @px1;
      position: relative;
      z-index: 20;
      .nav-btn-box{
        display: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        padding: 7 * @px1 0;
        span{
          display: block;
          width: 22 * @px1;
          height: 1 * @px1;
          transform-origin: left;
          transition: all 0.3s linear;
          opacity: 0.5;
          background-color: #c22f37;
        }
        span:first-child{
          margin-bottom: 5 * @px1;
        }
      }
      .logo{
        position: relative;
        img{
          position: absolute;
          width: 80 * @px1;
          display: block;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
        }
        p{
          text-align: left;
          line-height: 1;
          padding: 25 * @px1 0;
          padding-left: 90 * @px1;
          position: relative;
          padding-right: 160 * @px1;
          b{
            font-size: 36 * @px1;
            font-weight: 600;
            border-right: 1px solid rgba(153, 153, 153, 0.5);
            padding-right: 10 * @px1;
            display: inline-block;
          }
          span{
            display: inline-block;
            font-size: 18 * @px1;
            color: #FF8C00;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
          }
        }
      }
      .translate-box{
        display: none;
      }
      .often-use{
        padding-top: 22 * @px1;
        ul{
          li{
            padding-left: 25 * @px1;
            a,
            >div{
              display: block;
              .icon{
                display: block;
                width: 40 * @px1;
              }
              .text-box{
                padding-left: 10 * @px1;
                padding-top: 6 * @px1;
                p{
                  font-size: 28 * @px1;
                  line-height: 1;
                  color: #b22222;
                  font-weight: 600;
                }
              }
              .text-box.phone{
                padding-top: 4 * @px1;
                p{
                  font-size: 14 * @px1;
                }
                p:last-child{
                  margin-top: 5 * @px1;
                }
              }
            }
          }
          li:first-child{
            padding-left: 0;
          }
        }
      }
    }
  }
  >div.nav-list{
    background-color: #af2b25;
    >ul{
      display: inline-block;
      vertical-align: middle;
      >li{
        position: relative;
        a,
        div{
          display: block;
          padding: 15 * @px1 0;
          cursor: pointer;
          p{
            line-height: 1;
            color: white;
            font-size: 18 * @px1;
            font-weight: 600;
            padding: 0 30 * @px1;
            position: relative;
            border-right: 1px solid rgba(255, 255, 255, 0.5);
            display: inline-block;
          }
          position: relative;
        }
        ul{
          position: absolute;
          width: 100%;
          bottom: 0;
          left: 0;
          transform: translateY(100%) scaleY(0);
          background-color: rgba(178, 34, 34, 0.7);
          transition: all 0.1s linear;
          transform-origin: top;
          li{
            a,div{
              padding: 0;
              p{
                border: none;
                padding: 15 * @px1 0;
                display: inline-block;
              }
            }
          }
        }
        a:hover,
        div:hover{
          background-color: rgba(0, 0, 0, 0.2);
        }
      }
      >li.translate-box{
        min-width: 70 * @px1;
        ul{
          li{
            p{
              min-width: 70 * @px1;
            }
          }
        }
      }
      >li:hover{
        ul{
          transform: translateY(100%) scaleY(1);
        }
      }
      >li:first-child{
        a,
        div{
          p{
            border-left: 1px solid rgba(255, 255, 255, 0.5);
          }
        }
        ul{
          li{
            a,div{
              p{
                border: none;
              }
            }
          }
        }
      }
    }
  }
}
#header.nav-show{
  >.header{
    >div{
      .nav-btn-box{
        span.line-top{
          transform: rotateZ(45deg) translate(0, -6 * @px1);
        }
        span.line-bottom{
          transform: rotateZ(-45deg) translate(0, 6 * @px1);
        }
      }
    }
  }
  >div.nav-list{
    transform: translateY(0);
    >ul{
      >li{
        ul{
          display: none;
        }
      }
    }
  }
}
.english{
  #header{
    >div.header{
      >div{
        .logo{
          p{
            b{
              max-width: 371 * @px1;
            }
            span{
              max-width: 150 * @px1;
            }
          }
        }
        .often-use{
          padding-top: 60 * @px1;
        }
      }
    }
    >div.nav-list{
      >ul{
        >li{
          a,
          >div{
            p{
              font-size: 14 * @px1;
              padding-left: 15 * @px1;
              padding-right: 15 * @px1;
            }
          }
        }
      }
    }
  }
}
@media (max-width: 1300px) {
  #header{
    >div.header{
      >div{
        width: 1000 * @px1;
      }
    }
  }
  .english{
    #header{
      >div.header{
        >div{
          .logo{
            p{
              b{
                max-width: 315 * @px1;
                font-size: 30 * @px1;
              }
              span{
                max-width: 150 * @px1;
              }
            }
          }
          .often-use{
            ul {
              li{
                padding-left: 15 * @px1;
                a,
                >div{
                  .text-box{
                    p{
                      font-size: 20 * @px1;
                    }
                  }
                }
              }
              li:first-child{
                padding-left: 0;
              }
            }
          }
        }
      }
    }
  }
}
@media (max-width: 1220px) {
  #header{
    >div.nav-list{
      ul{
        li{
          a,
          >div{
            p{
              font-size: 14 * @px1;
              padding: 0 15 * @px1;
            }
          }
        }
      }
    }
  }
}
/**@media (max-width: 1170px) {
  #header{
    >div.header{
      .logo{
        width: 450 * @px1;
      }
      .often-use{
        padding-top: 15 * @px1;
        ul{
          li{
            padding-left: 15 * @px1;
            a,
            >div{
              .icon{
                width: 40 * @px1;
              }
              .text-box{
                padding-top: 8 * @px1;
                p{
                  font-size: 24 * @px1;
                }
              }
            }
          }
        }
      }
    }
  }
}**/
@media (max-width: 1030px) {
  #header{
    >div.header{
      >div{
        width: 900 * @px1;
        .logo{
          img{
            width: 60 * @px1;
          }
          p{
            padding: 15 * @px1;
            padding-left: 70 * @px1;
            padding-right: 145 * @px1;
            b{
              //border: none;
              font-size: 35 * @px1;
            }
            span{
              //display: none;
              font-size: 16 * @px1;
            }
          }
        }
        .often-use{
          padding-top: 12 * @px1;
        }
      }
    }
  }
  .english{
    #header{
      >div.header{
        >div{
          .logo{
            p{
              padding-right: 165 * @px1;
              b{
                max-width: 220 * @px1;
                font-size: 20 * @px1;
              }
              span{
                max-width: 150 * @px1;
              }
            }
          }
          .often-use{
            padding-top: 25 * @px1;
          }
        }
      }
    }
  }
}
@media (max-width: 1000px) {
  #header{
    >div.header{
      >div{
        width: 800 * @px1;
        .logo{
          img{
            width: 60 * @px1;
          }
          p{
            padding: 15 * @px1;
            padding-left: 70 * @px1;
            padding-right: 145 * @px1;
            b{
              //border: none;
              font-size: 30 * @px1;
            }
            span{
              //display: none;
              font-size: 16 * @px1;
            }
          }
        }
        .often-use{
          padding-top: 12 * @px1;
          ul{
            li{
              padding-left: 15 * @px1;
              a,
              >div{
                .icon{
                  width: 30 * @px1;
                }
                .text-box{
                  padding-top: 6 * @px1;
                  p{
                    font-size: 18 * @px1;
                  }
                }
                .text-box.phone{
                  padding-top: 4 * @px1;
                  p{
                    font-size: 12 * @px1;
                  }
                  p:last-child{
                    margin-top: 2 * @px1;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .english{
    #header{
      >div.header{
        >div{
          .logo{
            p{
              padding-right: 0;
              b{
                border: none;
              }
              span{
                display: none;
              }
            }
          }
        }
      }
    }
  }
}
@media (max-width: 800px) {
  #header{
    >div.header{
      >div{
        width: 90%;
        .nav-btn-box{
          display: block;
        }
        .logo{
          position: relative;
          padding-right: 35 * @px1;
          img{
            width: 40 * @px1;
          }
          p{
            padding: 8 * @px1;
            padding-left: 50 * @px1;
            b{
              font-size: 18 * @px1;
              border: none;
            }
            span{
              display: none;
            }
          }
        }
        .translate-box{
          position: absolute;
          top: 50%;
          transform: translateY(-50%) scale(0.7);
          transform-origin: right center;
          right: 50 * @px1;
          z-index: 100;
          display: block;
          min-width: 50 * @px1;
          div{
            position: relative;
            p{
              font-size: 12 * @px1;
              line-height: 1;
              padding: 5 * @px1 10 * @px1;
              background-color: #333333;
              color: white;
              cursor: pointer;
              min-width: 0;
            }
            ul{
              position: absolute;
              top: 0;
              left: 0;
              transform: translateY(60%);
              li{
              }
              li:last-child{
                margin-top: 5 * @px1;
              }
            }
          }
        }
        .often-use{
          display: none;
        }
      }
    }
    >div.nav-list{
      transition: all 0.3s linear;
      height: 100vh;
      transform: translateY(-100%);
      overflow-y: scroll;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding-top: 54 * @px1;
      z-index: 15;
      background-color: rgba(194, 47, 55, 0.9);
      ul{
        padding: 0 30 * @px1;
        padding-top: 30 * @px1;
        display: block;
        li{
          float: none;
          border-bottom: 1px solid rgba(255,255,255,0.3);
          width: 100%;
          a{
            p{
              border: none;
              font-size: 16 * @px1;
              font-weight: 400;
              opacity: 0.9;
            }
          }
        }
        li.translate-box{
          display: none;
        }
        li:first-child{
          a{
            p{
              border: none;
            }
          }
        }
        li:last-child{
          border: none;
          a{
            p{
              border: none;
            }
          }
        }
      }
    }
  }
  .english{
    #header{
      >div.nav-list{
        padding-top: 96 * @px1;
      }
    }
  }
}
.kbg_flags_outer{
  position: fixed;
  bottom: 0;
  transform: translateY(-200%);
  opacity: 0;
}